<template>
  <div>
   <h2>您好，欢迎超级管理员admin123登录本系统</h2>
   <el-card  class="home-content" >
     <div slot="header">
       <span>平台基本信息</span>
     </div>
      <div class="info-content">
        <div class="info-content-item">
            <span class="item-icon el-icon-user-solid"></span>
            <div class="item-info-detail">
              <span>用户数量</span>
              <b>{{formData.userTotal}}</b>
            </div>
        </div> 

        <div class="info-content-item">
            <span class="item-icon el-icon-star-on"></span>
            <div class="item-info-detail">
              <span>商品数量</span>
              <b>{{formData.goodsTotal}}</b>
            </div>
        </div> 
        
        <div class="info-content-item">
            <span class="item-icon el-icon-shopping-cart-full"></span>
            <div class="item-info-detail">
              <span>货品数量</span>
              <b>{{formData.productTotal}}</b>
            </div>
        </div> 

        <div class="info-content-item">
            <span class="item-icon el-icon-phone"></span>
            <div class="item-info-detail">
              <span>订单数量</span>
              <b>{{formData.orderTotal}}</b>
            </div>
        </div> 
      </div>
      

   </el-card>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'home',
  componentTitle: '首页',
  data () {
    return { 
      formData:{}
    }
  },
  mounted(){
    axios({
      url: 'http://192.168.200.251:8888/admin/dashboard',
      method:'get',
       headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
    }).then(res=>{
      this.formData=res.data.data
    })
  }
}
</script>

<style lang='scss' scoped>
 h2{
   margin-left:30px ;
 }
.home-content{
  margin: 30px;
}
 .info-content{
   display: flex;

   .info-content-item{
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      height: 108px;
      box-shadow:0px 0px 15px #ddd ;

      .item-icon{
        font-size: 50px;
      }
      
      .el-icon-user-solid {
        color: #40c9c6;
    }
    .el-icon-star-on {
        color: #36a3f7;
    }
    .el-icon-shopping-cart-full {
        color: #f4516c;
    }
    .el-icon-phone {
        color: #34bfa3;
    }

    .item-info-detail {
      display: flex;
      flex-direction: column;
      color: rgba(0,0,0,.45);
      font-size: 16px;

      :first-child {
        margin-bottom: 15px;
      }
    }
  }

  .info-content-item + .info-content-item {
    margin-left: 40px;
  }
}

 
</style>